<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="inc/header"></head>

<body th:with="menu='v'" >
<nav th:replace="inc/nav"></nav>

<div class="container-fluid">
  <div class="row">
    <div th:replace="inc/sidebar"></div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h1 class="page-header">
        视频教育
      <div class="pull-right">
        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalUpload">上传</button>
      </div>
      </h1>
      <table class="table table-striped">
        <thead>
        <tr>
          <th>标题</th>
          <th>视频地址</th>
          <th>图片地址</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${videoPlays.content}">
          <td th:text="${item.mc}"></td>
          <td th:text="${item.url}"></td>
          <td th:text="${item.tplj}"></td>
          <td th:text="${item.sjc}"></td>
          <td>
            <button class="btn btn-danger btn-xs btnDelete" th:attr="data-id=${item.zybh}">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
      <nav th:if="${videoPlays.content.size()} > 0">
        <ul class="pagination">
          <li th:each="i : ${#numbers.sequence(1, videoPlays.getTotalPages())}">
            <a th:href="${#httpServletRequest.getContextPath()} + '/v/admin/main?jsbh=' + ${jsbh} + '&page=' + ${i - 1}" th:text="${i}"></a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<div class="modal fade" id="modalUpload" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">上传视频</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="formUpload">
          <input type="hidden" name="jsbh" id="jsbh" th:attr="value=${jsbh}">
          <div class="form-group">
            <label for="name" class="control-label col-md-3">视频标题</label>
            <div class="col-md-9">
              <input type="text" name="name" id="name" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label for="video" class="control-label col-md-3">选择视频</label>
            <div class="col-md-9">
              <input type="file" name="video" id="video" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label for="img" class="control-label col-md-3">选择图片</label>
            <div class="col-md-9">
              <input type="file" name="img" id="img" class="form-control" required>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="btnUpload">上传</button>
      </div>
    </div>
  </div>
</div>

<div th:replace="inc/footer"></div>
<script th:inline="javascript">
  $(function () {
    // 表单验证
    var $formUpload = $('#formUpload');
    $formUpload.validate();

    // 文件上传
    $('#btnUpload').on('click', function () {
      if ($(this).hasClass('disabled')) return;
      if (!$formUpload.valid()) return;
      var formData = new FormData($('#formUpload')[0]);
      $.ajax({
        url: [[${#httpServletRequest.getContextPath()} + '/v/save']],
        method: 'post',
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function () {
          $('#btnUpload').addClass('disabled').text('正在上传，请稍候……')
        },
        complete: function () {
          $('#btnUpload').removeClass('disabled').text('上传')
        },
        success: function () {
          alert('上传成功');
          window.location.reload();
        },
        error: function () {
          alert('上传失败')
        }
      })
    });

    // 删除
    $('.btnDelete').on('click', function () {
      var id = $(this).attr('data-id');
      $.ajax({
        url: [[${#httpServletRequest.getContextPath()} + '/v/del']],
        data: {
          id: id
        },
        method: 'post',
        success: function () {
          alert('删除成功');
          window.location.reload();
        },
        error: function () {
          alert('删除失败');
        }
      })
    })
  });
</script>
</body>
</html>
